<template>
  <div>
    <van-cell title="制作品鉴卡" size="large" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="form.name"
        name="name"
        label="品鉴名称"
        placeholder="品鉴名称"
        :rules="[{ required: true, message: '请填写名称' }]"
      />
      <van-field
        v-model="form.begin_date"
        name="begin_date"
        label="开始时间"
        readonly
        clickable
        placeholder="品鉴开始时间"
        :value="form.begin_date"
        @click="onDateClick('begin_date')"
        :rules="[{ required: true, message: '请填写开始时间' }]"
      />
      <van-field
        v-model="form.end_date"
        name="end_date"
        label="结束时间"
        placeholder="品鉴结束时间"
        readonly
        clickable
        :value="form.end_date"
        @click="onDateClick('end_date')"
        :rules="[{ required: true, message: '请填写结束时间' }]"
      />
      <van-field
        v-model="form.comment"
        name="comment"
        label="品鉴说明"
        placeholder="品鉴说明"
      />

      <div style="margin: 32px 64px">
        <van-button round block type="info" native-type="submit"
          >创建</van-button
        >
      </div>
    </van-form>
    <van-popup v-model="showCalendar" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        title="选择时间"
        type="date"
        @confirm="onDateConfirm"
        @cancel="showCalendar = false"
      />
    </van-popup>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";

import { addWxCard } from "@/api/card";
import { formatDate } from "@/utils/datetime";

export default {
  name: "CardMake",
  components: {},
  // computed: {
  //   ...mapGetters(["retailer_name"]),
  // },

  data() {
    return {
      title: this.$route.meta.title,
      form: {
        name: "",
        comment: "",
        begin_date: null,
        end_date: null,
      },
      dateFlag: "",
      showCalendar: false,
      currentDate: new Date(),
    };
  },
  mounted() {},
  methods: {
    onSubmit() {
      this.addCard();
    },
    addCard() {
      addWxCard(this.form)
        .then((res) => {
          console.log(res);
          this.$router.push({
            name: "CardImage",
            params: { card_id: res.data.id },
          });
        })
        .catch(() => {
          this.$toast("添加失败!!");
        });
    },

    onDateClick(flag) {
      this.showCalendar = true;
      this.dateFlag = flag;
    },

    onDateConfirm(date) {
      this.showCalendar = false;
      this.currentDate = new Date();

      if (this.dateFlag == "begin_date") {

        this.form.begin_date = formatDate(date, "YYYY-MM-DD");

      } else if (this.dateFlag == "end_date") {

        this.form.end_date = formatDate(date, "YYYY-MM-DD");

      }
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>